<template>
	<view class="app-select">
		<view class="search-div"><u-search placeholder="请输入分销用户名" @search="searchList" v-model="obj.nickname"></u-search></view>
		<u-gap height="120rpx"></u-gap>
		<view class="">
			<u-radio-group v-model="select_id">
				<u-list @scrolltolower="scrolltolower" height="calc(50vh - 120rpx)">
					<u-list-item class="u-p-20" v-for="(item, index) in List" :key="index">
						<view class="u-flex ">
							<u-image shape="circle" height="120rpx" width="120rpx" :src="item.picurl"></u-image>
							<view class="u-flex-1 u-flex-column u-flex-between u-m-l-20">
								<u-text lines="1" :text="item.name"></u-text>
								<u-text :text="'ID:' + item.user_id"></u-text>
							</view>
							<view class="u-flex u-flex-items-center"><u-radio :name="item.user_id"></u-radio></view>
						</view>
						<u-line margin="20rpx 0 0 0"></u-line>
					</u-list-item>
					<u-loadmore @loadmore="getDataList" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
				</u-list>
			</u-radio-group>
		</view>

		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">关闭</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			obj: {
				nickname: ''
			},
			page: 1,
			size: 10,
			objTemp: {},
			isLoading: false,
			List: [{name: '总店', user_id: 0, picurl: 'picurl'}],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '上拉或点击加载更多',
			nomoreText: '实在没有了',
			show_model: false,
			content: '',
			select_id: ''
		};
	},
	props: {
		s_id: {
			type: Number,
			default: 0
		}
	},
	components: {},
	mounted() {
		this.select_id = this.s_id;
		this.searchList();
	},
	methods: {
		scrolltolower() {
			this.getDataList();
		},

		//查询数据
		searchList() {
			//复制查询对象
			this.objTemp = {...this.obj};
			this.List = [{name: '总店', user_id: 0, picurl: 'picurl'}];

			this.getDataList();
		},
		//查询数据本体
		getDataList() {
			this.isLoading = true;
			uni.$u.http
				.post('/madmin/agent/list?page=' + this.page + '&size=10', this.objTemp,{custom:{id:25}})
				.then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					let json = res.msg;
					if (json.data.length > 0) {
						this.page++;
						let list = json.data;

						this.List = this.List.concat(list);
					} else {
						this.status = 'nomore';
					}
				})
				.catch(e => {
					this.isLoading = false;
				});
		},

		saveData() {
			if (this.select_id || this.select_id == 0) {
				let data = this.List.filter(a => {
					return a.user_id == this.select_id;
				});

				if (data.length > 0) {
					this.$emit('change', data[0]);
				}
			}
		},close(){
			this.$emit('close')
		}
	}
};
</script>
<style lang="scss">
.content-box {
	margin: 20rpx auto;
	position: relative;
	font-size: 28rpx;
}
.search-box {
	width: 520rpx;
}
.tabs-div {
	top: 0;
}
.app-select {
	height: 50vh;
}
</style>
